<template>
  <div class="edu-page-warp">
    <ConditionCard
            shadow="never"
            body-style="padding: 24px 24px 6px 24px;"
            @search="handleSearch"
            @reset="reset('queryTempletsForm')"
    >
      <el-form
        ref="queryTempletsForm"
        :rules="rules"
        :model="queryTempletsForm"
        label-position="right"
        label-width="80px"
      >
        <el-row :gutter="24" style="height: 50px;">
          <el-col :span="8">
            <el-form-item :label="$t('message.startDate')" prop="startTime">
                <el-date-picker
                    style="width: 100%;"
                    v-model="queryTempletsForm.startTime"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerBeginDateBefore"
                ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('message.endDate')" prop="endTime">
                <el-date-picker
                    style="width: 100%;"
                    v-model="queryTempletsForm.endTime"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerBeginDateAfter"
                ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作类型:" prop="OperationType">
              <el-select
                v-model="queryTempletsForm.OperationType"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in options.OperationType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('label.college')+':'" prop="departmentId">
                <el-select
                    v-model="queryTempletsForm.departmentId"
                    style="width: 100%;"
                    clearable
                >
                    <el-option
                        v-for="item in options.college"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="培养层次:" prop="trainingLevel">
              <el-select
                v-model="queryTempletsForm.trainingLevel"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in options.trainingLevel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="培养类别：" prop="trainingCategory">
                <el-select
                    v-model="queryTempletsForm.trainingCategory"
                    style="width:100%"
                    size="mini"
                    placeholder="全部"
                    clearable
                >
                    <el-option
                        v-for="item in options.trainingCategory"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                    />
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('culture.scheme.degreeType') + ':'" prop="degreeType">
                <el-select
                    v-model="queryTempletsForm.degreeType"
                    style="width:100%"
                    size="mini"
                    clearable
                    placeholder="全部"
                >
                    <el-option
                        v-for="item in options.degreeType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学习形式:" prop="formLearning">
              <el-select
                v-model="queryTempletsForm.formLearning"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in options.formLearning"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作人:" prop="operationUser">
              <el-input v-model="queryTempletsForm.operationUser"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="对应学生:"  prop="studentName">
              <el-input v-model="queryTempletsForm.studentName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ConditionCard>
    <el-card shadow="never" body-style="padding: 24px;" class="card-margin">
      <h1 class="condition-title">关联记录</h1>
      <div class="div-main clearfix">    
        <div class="float-right">
            <el-button type="primary" @click="explor">导出</el-button>
        </div>
      </div>
      <!-- <el-table
        :data="tableData"
        ref="cultureSchemesTable"
        stripe
        style="width: 100%"
        @selection-change="selectionChange"
        :fit="true"
        class="maxtable"
      >
        <el-table-column label="操作时间" prop="createTime" min-width="150"/>
        <el-table-column label="学院" prop="departmentIdI18n" min-width="200"/>
        <el-table-column label="操作人" prop="operationUser" width="100"/>
        <el-table-column label="操作人工号" prop="operationUserId" width="100"/>
        <el-table-column label="操作类型" prop="operationType" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.operationType ==1?'关联':'取消关联'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="方案名称" prop="cultureSchemeName" min-width="320"/>
        <el-table-column label="对应学生" prop="studentName" width="100"/>
        <el-table-column label="学生学号" prop="studentId" width="100"/>
        <el-table-column label="培养层次" prop="trainingLevelI18n" width="100"/>
        <el-table-column label="培养类别" prop="trainingCategoryI18n" width="100"/>
        <el-table-column label="学位类型" prop="degreeTypeI18n" width="100"/>
        <el-table-column label="学习形式" prop="formLearningI18n" width="100"/>
      </el-table> -->
      <el-table
        :data="tableData"
        ref="cultureSchemesTable"
        stripe
        style="width: 100%"
        @selection-change="selectionChange"
        :cell-class-name="cellStyleMethod"
        :fit="true"
        class="maxtable"
      >
        <el-table-column label="操作时间" prop="createTime" min-width="150"/>
        <el-table-column label="学院" prop="departmentIdI18n" min-width="200"/>
        <el-table-column label="操作人" prop="operationUser" width="100"/>
        <el-table-column label="操作人工号" prop="operationUserId" width="100"/>
        <el-table-column label="操作类型" prop="operationType" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.operationType ==1?'关联':'取消关联'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="方案名称" prop="cultureSchemeName" min-width="320"/>
        <el-table-column label="对应学生" prop="studentName" width="100"/>
        <el-table-column label="学生学号" prop="studentId" width="100"/>
        <el-table-column label="培养层次" prop="trainingLevelI18n" width="100"/>
        <el-table-column label="培养类别" prop="trainingCategoryI18n" width="100"/>
        <el-table-column label="学位类型" prop="degreeTypeI18n" width="100"/>
        <el-table-column label="学习形式" prop="formLearningI18n" width="100"/>
      </el-table>
      <div class="edu-pagination">
        <div class="float-right">
           <el-pagination
                        :current-page="queryTempletsForm.pageNum_"
                        :page-sizes="[20,50,100,500,1000]"
                        :page-size="queryTempletsForm.pageSize_"
                        :total="queryTempletsForm.total"
                        layout="total, sizes, prev, pager, next, jumper"
                        style="float: right;margin:0;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
        </div>
    </div>
    </el-card>
  </div>
</template>
<script>
import UTILS from 'common/src/utils/utils';
import { queryDic, sortTrainingCategories } from 'common/src/api/dictionary';
import { cultureOperationLogInfo, exportCultureOperationLogInfo } from 'common/src/api/culture/culturePlan';
import { findFaculty } from "common/src/api/faculty";
export default {
  data() {
    return {
      queryTempletsForm: {
        trainingLevel: '', // 培养层次
        formLearning: '', // 学习形式
        name: '', // 名称
        trainingCategory:'',
        degreeType:'',
        pageNum_: 1,
        pageSize_: 20,
       // projId: '1',
        //professionCateGory: '',
       // templateId: '',
        departmentId:'',
        OperationType:'',
        startTime:'',
        endTime:'',
        studentName:'',
        operationUser:'',
         total: 0,
      },
      options: {
        grade: [],
        trainingLevel: [],
        formLearning: [],
        trainingCategory: [], // 培养类别,
        degreeType:[],
        // professionCateGory: [
        //   { value: '1', label: '专业大类' },
        //   { value: '2', label: '专业' },
        // ],
        templates: [],
        campusProfessions: [],
        trainingCategoryId: [],
        projId: [],
        college:[],
        OperationType:[
          { value: '1', label: '关联' },
          { value: '2', label: '取消关联' },
        ]
      },
      tableData: [],
      showBatchModifyDialog: false,
      cultureSchemes: [],
      currentTemplet: '',
      openStatus:'',//开启状态
      role:'',//角色
      pickerBeginDateBefore: {
              disabledDate: (time) => {
                    let endDateVal = this.queryTempletsForm.endTime;
                        if (endDateVal) {
                            return time.getTime() < new Date(endDateVal).getTime() - 180 * 24 * 60 * 60 * 1000 || time.getTime() > new Date(endDateVal).getTime()
                          }
                       }
                     },
      pickerBeginDateAfter: {
              disabledDate: (time) => {
                   let beginDateVal = this.queryTempletsForm.startTime;
                    if (beginDateVal) {
                      return time.getTime() > new Date(beginDateVal).getTime() + 180 * 24 * 60 * 60 * 1000 || time.getTime() < new Date(beginDateVal).getTime()
                    }
               }
      }
    }
  },

  created() {
    this.init()
  },
  methods: {
    cellStyleMethod({row, column, rowIndex, columnIndex}){
        if (columnIndex == 5) {
            return 'normal-cell';
        }
    },
    init() {
      this.initOptions();
      this.handleSearch();
    },
    initOptions() {
      findFaculty().then(res => { 
                let data = {"X_YX": res.data};
                UTILS.fillSelect({ college: "X_YX" }, data, this.options);
            });
      const data = {
        lang: this.$store.getters.language || 'cn',
        type: 'allChild',
        keys: ['X_PYCC', 'K_XXXS', 'X_PYLB', 'X_GLBM','X_XWLX'],
      }
      queryDic(data).then((res) => {
        if (res.code === 200) {
          let params = {
              lang: this.$store.getters.language,
              keys: ["X_PYLB"]
          };
          sortTrainingCategories(params).then((res) => {
              this.options.trainingCategory = res.data.X_PYLB;
          });
          UTILS.fillSelect(
            {
              trainingLevel: 'X_PYCC',
              formLearning: 'K_XXXS',
              // trainingCategory: 'X_PYLB',
              degreeType: "X_XWLX",
              projId: 'X_GLBM',
            },
            res.data,
            this.options
          )
        }
      })
    },
    reset(ref) {
      this.$refs[ref].resetFields();
      this.handleSearch();
    },
    setGetTime(){
        if (this.queryTempletsForm.startTime && typeof(this.queryTempletsForm.startTime) != 'number'){
            this.queryTempletsForm.startTime = this.queryTempletsForm.startTime.getTime();
          }   
          if (this.queryTempletsForm.endTime && typeof this.queryTempletsForm.endTime != 'number'){
            this.queryTempletsForm.endTime = this.queryTempletsForm.endTime.getTime();
          }
    },
    handleSearch() {
      let that = this
      that.setGetTime();
      cultureOperationLogInfo(that.queryTempletsForm).then(
        (res) => {
          if (res.code == 200) {
            that.tableData = res.data.list
            if(res.data.list && res.data.list.length > 0){
                res.data.list.forEach(d =>{
                  let date = new Date(parseInt(d.createTime))
                  let Y = date.getFullYear() + '-';
                  let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                  let D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()) + ' ';
                  let h = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':';
                  let m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':';
                  let s = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds()); 
                  d.createTime = Y+M+D+h+m+s;  
                })
            }
            that.queryTempletsForm.total = res.data.total_
          }
        }
      )
    },
    explor(){
      if(typeof (this.queryTempletsForm.startTime) != 'number'){
        this.setGetTime();
      }
      exportCultureOperationLogInfo(this.queryTempletsForm)
    },
    openStatusChange(val){
      insertPower("JHPLXG",val)
    },
    selectionChange(list) {
      this.cultureSchemes = list.map((ele) => {
        return ele.id
      })
    },
    editRow(id) {
      this.currentTemplet = id
      this.showBatchModifyDialog = true
    },
    handleSizeChange(val) {
            this.queryTempletsForm.pageSize_ = val;
            this.handleSearch();
        },
    handleCurrentChange(val) {
        this.queryTempletsForm.pageNum_ = val;
        this.handleSearch();
    },
    showModify() {
      // if (!this.queryCultureSchemesForm.templateId) {
      //   this.$message({
      //     type: 'warning',
      //     message: '请至少选择一个草稿状态的培养计划!',
      //   })
      //   return
      // }
    },
    // batchEdit() {
    //   this.showModify()
    // },
    changeVisible() {
      this.showBatchModifyDialog = false
      this.cultureSchemes = []
      this.$refs.cultureSchemesTable.clearSelection()
    },
  },
}
</script>
<style lang="scss" scoped>
.selected-disabled {
    color: #909399;
}
.el-table.maxtable .cell {
    line-height: 54px !important;
}
.el-table.maxtable .cell {
  white-space: pre-line !important;
}
.div-main {
    margin-bottom: 16px;
  }
</style>
